<template>
  <div class="app-container">
    <el-card id="dlls_card" class="box-card" style="text-align: center;">
      <el-form style="display:flex;flex-wrap:wrap;">
        <el-form-item label="计划ID" :label-width="formLabelWidths">
          <el-input v-model="promotion_id" clearable placeholder="请输入计划ID" />
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidths">
          <el-input v-model="advertiser_name" clearable placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="评论内容" :label-width="formLabelWidths">
          <el-input v-model="text" clearable placeholder="请输入评论内容" />
        </el-form-item>
        <el-form-item label="日期范围" :label-width="formLabelWidths">
          <el-date-picker
            v-model="start_date_end_date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidths" label="隐藏状态">
          <el-select v-model="is_hide" clearable filterable style="width: 100px">
            <el-option label="隐藏" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidths" label="回复状态">
          <el-select v-model="reply_status" clearable filterable style="width: 100px">
            <el-option label="回复" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidths" label="评论等级">
          <el-select v-model="comment_level" clearable filterable style="width: 100px">
            <el-option label="1级" value="LEVEL_ONE" />
            <el-option label="2级" value="LEVEL_TWO" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelsWidths">
          <el-button
            type="primary"
            @click="searchList"
          >搜索</el-button>
        </el-form-item>

      </el-form>
      <drag-head
        ref="dragHeadRef"
        :showAllFilterCondition="showAllFilterCondition"
        @fresh="fresh"
        @handleCommand="handleCommand"
        :head-columns="tableHead"
        :store-names="storeName"
        :data="commentList"
        :loading="loading"
      >
      </drag-head>
      <div style="margin-top: 10px;display: flex;justify-content: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 15, 20, 25, 50]"
          :current-page.sync="page"
          :page-size="page_size"
          layout="sizes, prev, pager, next, total"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="visibleName"
      :visible.sync="visible"
      width="1000px"
      append-to-body
    >
      <el-form
        ref="formRef"
        v-model="formData"
        label-width="120px">
        <el-form-item label="置顶评论" required v-if="visibleName=='置顶评论设置'">
          <el-select v-model="formData.stick_type" clearable filterable placeholder="请选择">
            <el-option label="置顶" value="STICK_ON_TOP" />
            <el-option label="取消置顶" value="CANCEL_STICK" />
          </el-select>
        </el-form-item>
        <el-form-item label="回复内容" required v-if="visibleName=='回复评论设置'">
          <el-input v-model="formData.reply_text" type="text" placeholder="请输入回复内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认保存</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import {getCommentsList,CommentsHide,CommentsReply,CommentsStick} from '../../api'
  import DragHead from "./dragHead.vue";
  import NoticeBar from "./noticeBar.vue";
  import moment from "moment";
export default {
  components: {
    DragHead,
    NoticeBar,
  },
  data() {
    return {
      formData:{
        id:"",
        reply_text:"",
        stick_type:""
      },
      storeName: 'commentList',
      formLabelWidth: '120px',
      formLabelWidths: '90px',
      formLabelsWidths: '20px',
      promotion_id: '',
      advertiser_name: '',
      text: '',
      start_date_end_date: ['', ''],
      is_hide:"",
      pickerOptions: {
        // 今天 昨天 最近三天 最近七天 本月 上个月
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick: (picker) => {
              const start = new Date();
              start.setTime(start.getTime() - 24 * 60 * 60 * 1000);
              start.setHours(0, 0, 0, 0);
              const end = new Date(start.getTime() + 24 * 60 * 60 * 1000 - 1);
              end.setHours(23, 59, 59, 999);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近七天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setDate(1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上个月",
            onClick: (picker) => {
              const start = new Date();
              start.setMonth(start.getMonth() - 1, 1);
              start.setHours(0, 0, 0, 0);
              const end = new Date(
                start.getFullYear(),
                start.getMonth() + 1,
                0
              );
              end.setHours(23, 59, 59, 999);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      reply_status:"",
      page_size: 50,
      page: 1,
      total: 0,
      commentList: [],
      loading: false,
      tableHead: [
        {
          label: '用户名称',
          prop: 'advertiser_name',
          width: 150,
          sortable: false,
          show: true
        },
        {
          label: '计划ID',
          prop: 'plan_id',
          width: 90,
          sortable: false,
          show: true
        },
        {
          label: '评论内容',
          prop: 'text',
          width: 300,
          sortable: false,
          show: true
        },
        {
          label: '是否回复',
          prop: 'reply_status',
          width: 150,
          sortable: false,
          show: true
        },
        {
          label: '隐藏状态',
          prop: 'hide',
          width: 90,
          sortable: false,
          show: true
        },
        {
          label: '评论等级',
          prop: 'level_type',
          width: 90,
          sortable: false,
          show: true
        },

        {
          label: '创建时间',
          prop: 'create_time',
          width: 200,
          sortable: false,
          show: true
        },
        {
          label: '更新时间',
          prop: 'update_time',
          width: 200,
          sortable: false,
          show: true
        },
        {
          label: '操作',
          prop: 'oper_comment',
          width: 300,
          sortable: false,
          show: true
        }
      ],
      showAllFilterCondition: true,
      comment_level:"",
      id:"",
      visible:false,
      visibleName:"",
    }
  },
  created() {
    let arr = localStorage.getItem(this.storeName);
    if (arr != null && arr.length != this.tableHead.length) {
      localStorage.removeItem(this.storeName)
      arr = localStorage.setItem(this.storeName, JSON.stringify(this.tableHead))
    }
    if (arr) {
      const isClearLocal = JSON.parse(arr).find(
        (item) =>
          item.prop === 'advertiser_name' && (!item.show || item.show === false)
      )
      if (isClearLocal) {
        const newArr = []
        JSON.parse(arr).forEach((item) => {
          if (item !== null) {
            if (!item['show']) {
              item['show'] = true
            }
            newArr.push(item)
          }
        })
        localStorage.setItem(this.storeName, JSON.stringify(newArr))
      }
    } else {
      localStorage.setItem(this.storeName, JSON.stringify(this.tableHead))
    }
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    this.start_date_end_date[0] = moment(start).format('YYYY-MM-DD')
    this.start_date_end_date[1] = moment(end).format('YYYY-MM-DD')
    this.getList()
  },
  mounted(){},
  methods:{
    async onSubmit() {
      if(this.visibleName=="置顶评论设置"){
        let res= await CommentsStick({
          id:this.formData.id,
          stick_type:this.formData.stick_type
        }).catch((e) => e);
        if (res.code === 0) {
          this.visible=false;
          this.$refs.formRef.resetFields();
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      }else {
        //回复评论
        let res=  await CommentsReply({
          id:this.formData.id,
          reply_text:this.formData.reply_text
        }).catch((e) => e);
        if (res.code === 0) {
          this.visible=false;
          this.$refs.formRef.resetFields();
          this.getList();
        } else {
          this.$message.error(res.msg);
        }
      }
    },
    onCancel(){
      this.$refs.formRef.resetFields();
      this.visible=false;
    },
    searchList(){
      this.getList()
    },
    handleCommand(command) {
      // console.log(command);
      switch (command.key) {
        case "reply"://回复评论
          this.visibleName="回复评论设置";
          this.visible=true;
          this.formData.id=command.val.id;
          break;
        case "top": //置顶评论
          this.visibleName="置顶评论设置";
          this.visible=true;
          this.formData.id=command.val.id;
          break;
        case "conceal"://隐藏评论
          this.concealCommentClick(command.val.id);
          break;
      }
    },
    async concealCommentClick(id){
     let res = await CommentsHide({
       id:id
     }).catch((e) => e);
      if (res.code === 0) {
       this.getList();
      } else {
        this.$message.error(res.msg);
      }
    },
    fresh() {
      this.commentList = [];
      this.getList(this.order);
    },
    async getList(isAll) {
      let {
        page_size,
        page,
      } = this;
      let res;
      let start_date;
      let end_date;
      if(this.start_date_end_date){
        start_date = this.start_date_end_date[0];
        end_date = this.start_date_end_date[1];
      }else {
        start_date =  moment().format('YYYY-MM-DD');
        end_date = moment().format('YYYY-MM-DD');
      }
      if (!isAll) {
        this.loading = true;
      }
      res = await getCommentsList({
        page_size: isAll ? 9999 : page_size,
        page,
        advertiser_name:this.advertiser_name,
        text:this.text,
        reply_status:this.reply_status==''||this.reply_status==null?0:Number(this.reply_status),
        is_hide:this.is_hide==''||this.is_hide==null?'':Number(this.is_hide),
        promotion_id:Number(this.promotion_id),
        comment_level:this.comment_level,
        start_date:start_date,
        end_date:end_date,
      }).catch((e) => e);
      this.loading = false;
      this.$refs.dragHeadRef.renderTable();
      // console.log("getGroupList", res);
      if (res.code === 0) {
        this.total = Number(res.data.Total);
        this.commentList =res.data.List;
      } else {
        this.commentList = [];
        this.$message.error(res.msg);
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;

      this.getList();
    },
  }
}
</script>

<style scoped>

</style>
